<template>
  <div class="container">
    <div class="box" id="aaa">
      <div class="content" id="content">
        <header class="header">
          <van-sticky>
            <van-nav-bar left-arrow right-text="搜索" @click-right="onSearch" @click-left="goBack">
              <van-search
                v-model="valuea"
                slot="title"
                placeholder="请输入搜索关键词"
                @search="onSearch"
                background="#25b6f1"
              />
            </van-nav-bar>
          </van-sticky>
        </header>
         <van-sticky>
          <p>
            <van-dropdown-menu>
              <van-dropdown-item @change="change1" v-model="value1" :options="option1" />
              <van-dropdown-item @change="change2" v-model="value2" :options="option2" />
            </van-dropdown-menu>
          </p>
        </van-sticky>
          <van-pull-refresh v-model="isLoading" @refresh="onRefresh" >
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
            >
              <Prolist :prolist="prolist"></Prolist>
            </van-list>
          </van-pull-refresh>
           <div class="backtop" v-if="flag" @click="backtop">
             <van-icon name="upgrade" size="36"/>
           </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Swipe, SwipeItem, Lazyload, Image, NavBar, Search, List, PullRefresh, Icon, DropdownMenu, DropdownItem, Sticky } from 'vant'
import { getProlist, getSearch } from '@/api'
import Prolist from '@/components/prolist'
Vue.use(Swipe) // Vue.use - 注册的组件
Vue.use(SwipeItem) // Vue.use - 注册的组件
Vue.use(Lazyload) // Vue.use - 注册的组件
Vue.use(Image) // Vue.use - 注册的组件
Vue.use(NavBar) // Vue.use - 注册的组件
Vue.use(Search) // Vue.use - 注册的组件
Vue.use(List) // Vue.use - 注册的组件
Vue.use(PullRefresh) // Vue.use - 注册的组件
Vue.use(Icon) // Vue.use - 注册的组件
Vue.use(DropdownMenu)
Vue.use(DropdownItem)
Vue.use(Sticky)
export default {
  data () {
    return {
      prolist: [],
      oldlist: '',
      loading: false,
      finished: false,
      isLoading: false,
      flag: false, // 返回顶部出现标识
      count: 1, // 默认会添加第0页的数据，从1开始
      valuea: '',
      value1: 0,
      value2: 0,
      option1: [
        { text: '综合价格', value: 0 },
        { text: '价格最低', value: 1 },
        { text: '价格最高', value: 2 }
      ],
      option2: [
        { text: '销量评分', value: 0 },
        { text: '销量最高', value: 1 },
        { text: '评分最高', value: 2 }
      ]
    }
  },
  components: {
    Prolist
  },
  mounted () {
    getProlist().then(res => {
      this.prolist = res.data.data
      // 数据填充完毕 -- 监听 、 绑定 滚轮滚动事件
      document.getElementById('aaa').addEventListener('scroll', this.handleScroll, false)
      this.oldlist = JSON.stringify(res.data.data)
    })
  },
  methods: {
    backtop () {
      document.getElementById('aaa').scrollTop = 0
    },
    handleScroll () {
      // 获取滚动条滚动的距离
      const scrollTop = document.getElementById('aaa').scrollTop
      // 判定返回顶部是不是要出现
      if (scrollTop > 500) {
        this.flag = true
      } else {
        this.flag = false
      }
    },
    onRefresh () {
      this.isLoading = true
      getSearch({
        keyword: this.valuea
      }).then(res => {
        this.isLoading = false // 刷新结束
        // 重置列表数据
        this.prolist = res.data.data
        this.oldlist = JSON.stringify(res.data.data)
        // 重置页面以及 finished的值
        this.count = 1
        this.finished = false
      })
    },
    onLoad () {
      this.loading = true // 表示开始加载了
      getSearch({ keyword: this.valuea, limit: 10, count: this.count }).then(res => {
        this.loading = false // 表示结束加载了
        // 如果没有数据
        if (res.data.len === 0) { // res.data.data.length
          this.finished = true // 表示数加载完毕了
        } else {
          // 有数据 拼接数据  ---   合并数组
          // concat [...this.prolist, ...res.data.data]
          this.prolist = [...this.prolist, ...res.data.data]
          this.oldlist = JSON.stringify(res.data.data)
          // 页面加1
          this.count += 1
        }
      })
    },
    onSearch () {
      // search事件在点击键盘上的搜索/回车按钮后触发
      getSearch({
        keyword: this.valuea
      }).then(res => {
        this.prolist = res.data.data
        this.oldlist = JSON.stringify(res.data.data)
      })
    },
    goBack () {
      this.$router.go(-1)
    },
    change1 (value) {
      console.log(value)
      if (value === 0) {
        this.prolist = JSON.parse(this.oldlist)
        return
      }
      if (value === 1) {
        this.prolist.sort((a, b) => {
          return a.price - b.price
        })
        return
      }
      if (value === 2) {
        this.prolist.sort((a, b) => {
          return b.price - a.price
        })
      }
    },
    change2 (value) {
      console.log(value)
      if (value === 0) {
        this.prolist = JSON.parse(this.oldlist)
        return
      }
      if (value === 1) {
        this.prolist.sort((a, b) => {
          return b.sales - a.sales
        })
        return
      }
      if (value === 2) {
        this.prolist.sort((a, b) => {
          return b.rating - a.rating
        })
      }
    }
    // gosearch () {
    //   // 编程式跳转 页面
    //   this.$router.push('/product')
    // }
  }
}
</script>

<style lang="scss" scoped>
@import '@/lib/reset.scss';
.container{
  @include background-color(#f8f8f8);
}
.van-nav-bar{
  background-color: #25b6f1;
}
.van-search {
  padding: 5px 15px;
}
.van-nav-bar__title {
  max-width: 80%;
}
.backtop {
  position: fixed;
  right: 10px;
  bottom: 55px;
  width: 36px;
  height: 36px;
}
</style>
